<template>
    <el-container style="height: 100%">
        <el-aside width="80px">
            <img class="uuLogoYuan" src="../../../src/assets/uulogoyuan.png" style="height:50px;width:50px"
                 alt="avatar">
            <div style="margin-top: 50px;">
                <el-radio-group @change="selectRadio" v-model="radio5" size="small">
                    <el-row style="height: 25px;">
                        <el-radio :label="1" style="font-weight: bold;">图表</el-radio>
                    </el-row>
                    <el-row style="height: 25px">
                        <el-radio :label="2" style="font-weight: bold;">文本</el-radio>
                    </el-row>
                    <el-row>
                        <el-radio :label="3" style="font-weight: bold;">地图</el-radio>
                    </el-row>
                </el-radio-group>
                <div style="line-height: 55px;margin-top: 20px">
                    <el-button title="添加" @click="addElement" type="primary" icon="fa fa-plus fa-lg"></el-button>
                    <el-button title="模版" @click="addTemplate" type="primary" icon="fa fa-telegram fa-lg"></el-button>
                    <el-button title="保存" type="primary" icon="fa fa-floppy-o fa-lg"
                               style="margin-top: 170px"></el-button>
                    <el-button title="删除" @click="deleteAllElement" type="primary"
                               icon="fa fa-trash fa-lg "></el-button>
                </div>
            </div>
        </el-aside>
        <el-main style="height: 100%">
            <div class="border">
                <grid-layout id="layout"
                             :layout="gridItems"
                             :col-num="12"
                             :row-height="30"
                             :is-draggable="true"
                             :is-resizable="true"
                             :vertical-compact="false"
                             :margin="[10, 10]"
                             :use-css-transforms="true">
                    <grid-item class="info" v-for="(item,idx) in gridItems" :id="item.i"
                               :x="item.x"
                               :y="item.y"
                               :w="item.w"
                               :h="item.h"
                               :i="item.i"
                               :key="idx"
                               @resized="resizedEvent"
                               drag-allow-from=".vue-draggable-handle"
                               drag-ignore-from=".vue-no-draggable-handle">
                        <component v-bind:id="'map'+item.i"
                                   v-bind:is="item.component"
                                   v-on:openChart="chartDivDialog"
                                   v-on:openMap="mapDivDialog"
                                   v-on:openText="textDivDialog"
                                   v-on:deleteSelectElement="deleteElement"></component>
                    </grid-item>
                </grid-layout>
            </div>
        </el-main>
        <chartDivDialog :chart-div-dialog-visible="chartDivDialogVisible"></chartDivDialog>
        <mapDivDialog :map-div-dialog-visible="mapDivDialogVisible"></mapDivDialog>
        <!--<textDivDialog :text-div-dialog-visible="textDivDialogVisible"></textDivDialog>-->
    </el-container>
</template>

<script>
    import chartDiv from '../../components/div/chartDiv';
    import mapDiv from '../../components/div/mapDiv';
    import textDiv from '../../components/div/textDiv';
    import chartDivDialog from '../../components/dialog/chartDivDialog';
    import mapDivDialog from '../../components/dialog/mapDivDialog';
    import textDivDialog from '../../components/dialog/textDivDialog';

    export default {
        name: "dataVisible",
        data() {
            return {
                chartType: 'bar',
                radio5: '',
                selectIndex: 2,
                gridItems: [],
                itemsCount: 0,
                chartData: [],
                chartDivDialogVisible: {
                    v: false
                },
                mapDivDialogVisible: {
                    v: false
                },
                textDivDialogVisible:{
                    v:false
                }
            };
        },
        components: {
            "chartDivDialog": chartDivDialog,
            "mapDivDialog": mapDivDialog,
            "textDivDialog":textDivDialog,
            "v_text": textDiv,
            "v_chart": chartDiv,
            "v_map": mapDiv,
        },
        methods: {
            addTemplate(){

                let a = 2;
                let b = 5;
                let ary = [1,3,2];

                alert(ary.indexOf(a)!==-1);

                //新增模版
                this.gridItems= [
                    {"x":3,"y":2,"w":5,"h":20,"i":"griditem_1",component: "v_map"},
                    {"x":0,"y":0,"w":3,"h":11,"i":"griditem_2",component: "v_chart"},
                    {"x":0,"y":10,"w":3,"h":11,"i":"griditem_3",component: "v_chart"},
                    {"x":8,"y":0,"w":3,"h":6,"i":"griditem_4",component: "v_chart"},
                    {"x":8,"y":6,"w":3,"h":6,"i":"griditem_5",component: "v_chart"},
                    {"x":8,"y":10,"w":3,"h":10,"i":"griditem_6",component: "v_chart"},
                    {"x":3,"y":0,"w":5,"h":2,"i":"griditem_7",component: "v_text"}
                ];
            },
            selectRadio(label) {
                this.selectIndex = label;
            },
            chartDivDialog() {
                this.$Bus.$emit('chartDivDialogVisible.v', true);
            },
            mapDivDialog() {
                this.$Bus.$emit('mapDivDialogVisible.v', true);
            },
            textDivDialog() {
                this.$Bus.$emit('textDivDialogVisible.v', true);
            },
            deleteElement: function (str) {
                let obj = this;
                this.$confirm('是否删除内容？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                for (let j = 0; j < this.gridItems.length; j++) {
                    let index = this.gridItems[j].i.indexOf(str);
                    if (index !== -1) {
                        this.gridItems.splice(j, 1);
                        break;
                    }
                }
                }).catch(function (error) {
                    obj.$message.error("删除失败！");
                });
            },
            addElement() {
                let that = this;
                let id = "griditem_" + (this.gridItems.length + 1);
                if (this.selectIndex == 1) {
                    that.gridItems.push({x: 0, y: 0, w: 4, h: 6, i: id, component: "v_chart"});
                    that.itemsCount += 1;
                } else if (this.selectIndex == 2) {
                    that.gridItems.push({x: 0, y: 0, w: 4, h: 6, i: id, component: "v_text"});
                    that.itemsCount += 1;
                } else if (this.selectIndex == 3) {
                    that.gridItems.push({x: 0, y: 0, w: 5, h: 7, i: id, component: "v_map"});
                    that.itemsCount += 1;
                }
            },
            deleteAllElement() {
                let obj = this;
                this.$confirm('是否删除全部内容？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.gridItems = [];
                }).catch(function (error) {
                    obj.$message.error("删除失败！");
                });
            },
            resizedEvent(i, newH, newW, newHPx, newWPx) {
                // document.getElementById(i).firstChild.style.width = newWPx + "px";
                // document.getElementById(i).firstChild.style.height = newHPx + "px";
            },
            // greet(val) {
            //     vm.val = val;
            // },
        },
        mounted() {
        },
        watch: {},
        computed: {}
    };
</script>

<style>
    html, body {
        overflow: hidden;
        height: 100%;
    }

    .el-aside {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        line-height: 70px;
        overflow: hidden;
        height: 100%;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 160px;
        padding: 10px 10px;
    }

    .border {
        border: 1px dashed rgba(9, 17, 32, 0.65);
        /*width:300px;*/
        height: 100%;
        overflow: auto;
        /*position: relative;*/
        /*margin-top:10px*/
    }

    .vue-grid-item.focused {
        position: absolute;
        z-index: 100;
    }

    /*.vue-grid-item{*/
    /*height:200px!important;*/
    /*width:250px!important;*/
    /*}*/
    /*.content-box{*/
    /*!*position: relative;*!*/
    /*position: absolute;*/
    /*z-index:200;*/
    /*}*/

    #drag {
        width: 200px;
        height: 200px;
        background: #66b1ff;
        position: absolute;
        left: 300px;
        top: 120px;
    }

    .dragitem {
        background: #ff3f8b;
    }

    .el-button {
        height: 45px;
        width: 50px;
        text-align: center;
        padding: 0 0;
    }

    .el-button + .el-button {
        margin-left: 0;
    }

    .uuLogoYuan:hover {
        cursor: pointer;
    }

    .info {
        box-shadow: rgb(136, 136, 136) 0px 0px 5px;
    }

</style>